<template>
  <div style="display: flex; flex-direction: column; height: 100vh">
    <div style="flex: 1; overflow: hidden;">
      <FlowEditor v-model="myFlow" :request="request"
                  :userConfig="UserConfigComponent" :fieldComponentRegistry="fieldComponentRegistry"
                  :userTaskConfig="UserTaskConfigModal"/>
    </div>
    <div style="height: fit-content">
      {{ myFlow }}
    </div>
  </div>

<!--  <HModal :height="600" :width="800" title="test" okText="确定" cancelText="取消" :visible="true">-->
<!--    <template slot="title">-->
<!--      <Tabs slot="title">-->
<!--        <TabPane v-for="item in 20" :tab="`test1${item}`"-->
<!--                 :key="`test${item}`"/>-->
<!--      </Tabs>-->
<!--    </template>-->
<!--    sadfasdf阿斯蒂芬-->
<!--  </HModal>-->
</template>
<script>
import {Button, ConfigProvider, Modal, Tabs} from 'ant-design-vue';
import FlowEditor from './components/flow/FlowEditor/FlowEditor.vue';
import UserTaskConfigModal from './components/UserTaskConfigModal/UserTaskConfigModal.vue';
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
import UserConfigComponent from '@/components/UserConfigComponent/UserConfigComponent.vue';
import FlowModelEditor from '@/components/FlowModelEditor/FlowModelEditor.vue';
import fieldComponentRegistry from '@/components/FieldComponentDelegate/test/FieldRegistry';
import HModal from '@/components/HModal/HModal.vue';

export default {
  computed: {
    fieldComponentRegistry() {
      console.log(fieldComponentRegistry)
      return fieldComponentRegistry
    }
  },
  components: {
    Tabs,
    TabPane: Tabs.TabPane,
    HModal,
    FlowModelEditor,
    Button,
    Modal,
    ConfigProvider,
    UserConfigComponent,
    UserTaskConfigModal,
    FlowEditor
  },
  data() {
    return {
      flowModel: {
        formType: 'test',
        titleFormulaText: undefined,
        titleFormula: undefined,
      },
      locale: zhCN,
      UserTaskConfigModal,
      UserConfigComponent,
      myFlow: undefined,
      visible: true,
      request: {
        baseURL: '/h-flow',
        headers: {},
      }
    };
  },
  methods: {
    check() {
      this.$refs.FlowModelEditor.check();
    },
  }
};
</script>
<style>
* {
  padding: 0;
  margin: 0
}
</style>